import React from "react";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router";
import styles from "./index.module.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const hanShou = () => {
    navigate("/shouhuoadd");
  };
  const name = localStorage.getItem("recipientName");
  const tel = localStorage.getItem("mobilePhone");
  const address = localStorage.getItem("detailedAddress");
  const city = JSON.parse(localStorage.getItem("region") as string) || "";
  return (
    <div className={styles.shouhuo}>
      <NavBar title="收货地址" onClickLeft={() => navigate("/my")} />
      <div>
        {name && tel && address && city ? (
          <div className={styles.cun}>
            <div className={styles.xinxi}>
              <div className={styles.xin}>
                <h3>{name}</h3>
                <h4>{tel}</h4>
              </div>
              <h3>{city}</h3>
              <p>{address}</p>
            </div>
            <button className={styles.btt}>修改</button>
          </div>
        ) : (
          <h3 className={styles.shou}>暂无收货地址哦~</h3>
        )}
      </div>

      <div className={styles.tian}>
        <button className={styles.btn} onClick={() => hanShou()}>
          <span className={styles.add}>+</span>添加收货地址
        </button>
      </div>
    </div>
  );
};

export default Index;
